<template>
  <!-- 弹出框 -->
  <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑员工信息':'新增员工'">
    <el-form ref="personnelForm" autocomplete="on" :rules="personnelRules" :model="personnel" label-width="80px"
      label-position="left">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="personnel.username" placeholder="输入4位以上的用户名" ref="username" name="username" v-if="dialogType!=='edit'" />
        <el-input v-model="personnel.username" placeholder="输入4位以上的用户名" ref="username" name="username" v-else disabled />
      </el-form-item>
      <el-form-item label="真实姓名" prop="name">
        <el-input v-model="personnel.name" placeholder="输入真实姓名" ref="name" name="name" />
      </el-form-item>
      <template v-if="dialogType ==='edit'">
        <el-form-item label="职位">
          <el-select v-model="personnel.role" placeholder="请选择">
            <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="personnel.adminStatus" placeholder="请选择">
            <el-option v-for="item in adminStatus" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密钥">
          <el-input ref="password" v-model="secretKey" type="password" placeholder="输入该管理员密钥" name="password"
            tabindex="2" autocomplete="on" />
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="密钥">
          <el-input ref="password" v-model="secretKey" type="password" placeholder="输入该管理员密钥" name="password"
            tabindex="2" autocomplete="on" />
        </el-form-item>
      </template>
    </el-form>
    <div style="text-align:right;">
      <el-button type="primary" @click="confirmPersonnel">提交</el-button>
      <el-button type="danger" @click="closePersonnel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    MessageBox,
    Message
  } from 'element-ui'
  import {
    getPersonnel,
    addPersonnel,
    updatePersonnel,
    deletePersonnel,
    getRoles
  } from '@/api/personnel'
  export default {
    props: {
      "dialogType": {
        default: 'new',
        type: String
      },
      "dialogVisible": {
        default: false,
        type: Boolean
      },
      "personnel": {
        type: Object
      },
      "role": {
        type: String
      }
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value.length < 4) {
          callback(new Error('输入的用户名需要大于4位'))
        } else {
          callback()
        }
        callback()
      }
      return {
        adminStatus: [{
            value: '冻结',
            label: '冻结'
          },
          {
            value: '正常',
            label: '正常'
          }
        ],
        secretKey: "",
        personnelRules: {
          username: [{
            required: true,
            trigger: 'blur',
            validator: validateUsername
          }],
          name: [{
            required: true,
            trigger: 'blur'
          }]
        },
        roles:[]
      }
    },
    methods: {
      // 获取roles
      async getRoles(){
        const {data} = await getRoles("role")
        for (var i = 0; i < data.length; i++) {
          let obj = {
            value:data[i].valueEn,
            label:data[i].value
          }
          this.roles.push(obj)
        }
      },
      // 提交数据
      confirmPersonnel() {
        if (this.dialogType === 'new') {
          // 提交新增用户表单
          const personnel = this.personnel
          personnel.secretKey = this.secretKey
          personnel.role = this.role
          // 校验表单数据
          this.$refs.personnelForm.validate(async valid => {
            if (valid) {
              const res = await addPersonnel(personnel)
              if (res.code === 1) {
                this.$emit("dialogDataAdd", res.data)
                this.closePersonnel()
                Message({
                  message: res.msg,
                  type: 'success',
                  duration: 5 * 1000
                })
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        } else {
          // 提交编辑
          const personnel = this.personnel
          personnel.secretKey = this.secretKey
          // 校验表单数据
          this.$refs.personnelForm.validate(async valid => {
            if (valid) {
              const res = await updatePersonnel(personnel)
              if (res.code === 1) {
                this.$emit("dialogDataChange",personnel.id,personnel)
                this.closePersonnel()
                Message({
                  message: res.msg,
                  type: 'success',
                  duration: 5 * 1000
                })
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
      },
      // 关闭表单
      closePersonnel() {
        this.$emit("update:dialogVisible", false)
      }
    },
    created() {
      this.getRoles()
    }
  }
</script>

<style>
</style>
